<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        /* 
            如果不会写就从盒子模型的6大属性下手
                width  height  padding  border  margin  background
        */
        .goods{
            /* 一个盒子的高度，通常是靠内容撑起来 */
            width: 400px;
            margin: 100px auto;
            border: 1px solid red;
            /* 背景颜色默认会填充padding区域 */
            background:rgb(246, 246, 246); 
            padding: 10px; 
        }

        .goods-img{
            /* 如果一个男盒子没有设置宽度，默认宽度是父盒子的100% */
            /* 如果一个男盒子没有设置高度，那么高度由内容撑起来 */
            border: 1px solid #ccc;

            height: 400px;
        }

        .goods-img img{
            /* img图片，默认在底部有一个小白边，去掉白边 */
            display: block;

            /* 默认情况下，图片多大，在网页上显示多大 */
            /* 设置宽度，高度会等比缩放 */
            width: 100%;
        }

        .goods-info{
            /* 下面的的代码，直接去网上copy */
            line-clamp: 2;
            /* overflow用来处理溢出的 hidden是隐藏*/
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp:2;

            margin: 8px 0;
        }

        .goods-price{
            /* 默认情况下，两个男盒子，需要独占一行 */
            /* 现在：让两个男盒子可以并排显示 */
            /* 方案：1）display:inline-block;  2）浮动   3）flex */
            
            /* 父设置了font-size:0px; 子都要继承。 */
            font-size: 0px;
            color: #999;
        }
        /* 
            inline-block的问题：
                1）回车换行有间隙
                2）两个盒子这间的文字不对齐
                    解决：A）给父设置fs为0px  B）重新给子设置fs大小
        */
        .price{
            display: inline-block;
            font-size: 14px;
        }
        .comment{
            display: inline-block;
            margin-left: 198px;
            font-size: 14px;

        }
        .present-price{
            display: inline-block;
            color: red;
        }
        .present-price span{
            font-size: 24px;
        }
        .origin-price{
            display: inline-block;
        }
        .origin-price span{
            text-decoration: line-through;
        }
    </style>
</head>
<body>
    <div class="goods">
        <div class="goods-img">
            <img src="https://img12.360buyimg.com/n1/jfs/t1/159701/38/9948/81556/6040d1d9E6b486d68/5829df13f7b07b58.jpg" alt="">
        </div>
        <h2 class="goods-info">
            【轻烟蜜粉】MAKE UP FOR EVER 玫珂菲 HD清晰无痕蜜粉 饼 6.2g（控油定妆粉饼补妆便携 雾面哑光）
        </h2>
        <div class="goods-price">
            <div class="price">
                <div class="present-price">￥<span>275</span></div><div class="origin-price">￥<span>380</span></div>
            </div><div class="comment">4934人已经评价</div>
        </div>
    </div>
</body>
</html>



























